<template>
  <el-popover :width="480" popper-class="popper-aaa">
    <template #reference>
      <div v-show="user" style="font-size: 16px">
        <i class="iconfont">&#xe634;</i>

        <el-badge type="danger" :hidden="!isseecount" :value="isseecount" class="item">
          <span style="font-size: 14px"> &nbsp;消息</span>
        </el-badge>
      </div>
    </template>
    <ul v-if="gridData.length" class="list-group list-group-flush">
      <li class="list-group-item d-flex justify-content-between align-items-center list-group-item-action"
        v-for="v in gridData" :key="v.ID">
        <div class="list-group-item-1" @click="click(v)" :class="v.issee ? 'text-muted' : ''">
          <el-badge is-dot v-show="!v.issee" type="danger" class="el-badge-item"></el-badge>
          <a :href="v.notice.description" class="stretched-link">
            {{
                v.notice.name
            }}
          </a>
        </div>

        <span class="badge-pill">{{ new Date(v.createdAt).toLocaleDateString() }}</span>
      </li>
    </ul>
    <ul v-else class="list-group list-group-flush">
      <li class="list-group-item d-flex justify-content-between align-items-center list-group-item-action">目前没有消息通知</li>
    </ul>
    <div v-show="gridData.length" class="footer text-right">
      <router-link :style="{ color: 'var(--color--43)' }" to="/notice">查看全部</router-link>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { useStore } from "vuex";
import { computed, defineComponent, onMounted, watch, ref } from "vue";
import Studycodemodel from "../../mysql_interface/studycodemodel";
import { asyncchangemynotice, asyncgetmynotice } from "../../api";
import { Storekey } from "../../interface";
const store = useStore(Storekey);
const user = computed(() => {
  return store.state.user;
});
const isseecount = computed(() => {
  return store.state.notice?.isseecount;
});

const gridData = computed(() => {
  return store.state.notice?.rows || [];
});
watch(
  () => user,
  (v) => {
    if (v) {
      start();
    }
  }
);
onMounted(() => {
  start();
});

async function start() {
  store.dispatch("actionmynotice", {
    _offset: 0,
    _limit: 5,
  });
}
async function click(v: Studycodemodel.Iusernotice) {
  if (v.ID && v.issee === false) {
    await asyncchangemynotice({ ID: v.ID });
    await start();
  }
}

</script>

<style scoped>
.list-group {
  padding: 5px;
}

.footer {
  margin-top: 12px;
  background: #f4f4f5;
  height: 50px;
  padding-right: 10px;
  font-size: 14px;
  line-height: 50px;
}

.footer i {
  cursor: pointer;
}

.list-group-item .list-group-item-1 {
  max-width: 320px;
}

.badge-pill {
  color: var(--color-cheng);
  border-color: var(--color-cheng);
}

.stretched-link {
  color: inherit;
  text-decoration: none;
}

.el-badge-item {
  top: 4px;
  left: -10px;
  width: 0px;
}

.icon {
  font-size: 24px;
  margin-right: 4px;
  display: inline-block;
}

.iconfont {
  font-size: 14px;
  padding-right: 2px;
}
</style>

<style>
.popper-aaa {
  padding: 0 !important;
}

.item .el-badge__content.is-fixed {
  top: 20px;
}
</style>
